/* flex布局 */
.f 
  display: flex
.f-col
  flex-direction: column
.f-ac
  align-items: center
.f-al
  align-items: left
.f-ar
  align-items: right
.f-jc
  justify-content: center
.f-js
  justify-content: flex-start
.f-je
  justify-content: flex-end
.f-jl
  justify-content: left
.f-jr
  justify-content: right
.f-ja
  justify-content: space-around
.f-jb
  justify-content: space-between
.f-w
  flex-wrap: wrap
.g
  display: grid
.b-b
  box-sizing: border-box
.wb-b
  word-break: break-all
.t-c
  text-align: center

/* flex比例 */
@for $i from 1 through 9
  .f-#{$i}
    flex: $i
/* grid列数 */
@for $i from 1 through 10
  .g#{$i}
    grid-template-columns: repeat($i, 1fr)!important
    /* 显示行数 */
  .line-#{$i}
    overflow: hidden
    display: -webkit-box
    text-overflow: ellipsis
    -webkit-box-orient: vertical
    -webkit-line-clamp: $i
/* grid间距 */
$gap: 100
@while $gap > 0
  .gap#{$gap}
    gap: 1px * $gap
  .gap#{$gap}-col
    column-gap: 1px * $gap
  .gap#{$gap}-row
    row-gap: 1px * $gap
  $gap: $gap - 1
/* 外边距 顶部 */
// 字体字号
@for $i from 10 through 40
  .font#{$i}
    font-size: #{$i}px

// margin距离 padding内边距
@for $i from 1 through 200
  .m#{$i}
    margin: #{$i}px
  .ml#{$i}
    margin-left: #{$i}px
  .mr#{$i}
    margin-right: #{$i}px
  .mb#{$i}
    margin-bottom: #{$i}px
  .mt#{$i}
    margin-top: #{$i}px
  .p#{$i}
    padding: #{$i}px
  .pl#{$i}
    padding-left: #{$i}px
  .pr#{$i}
    padding-right: #{$i}px
  .pt#{$i}
    padding-top: #{$i}px
  .pb#{$i}
    padding-bottom: #{$i}px
.container
  width: 1200px
  margin: 0 auto

.p-r 
  position: relative
.p-a 
  position: absolute
.p-f
  position: fixed

@keyframes rotate 
  0% 
    transform: rotate(0deg)
  100% 
    transform: rotate(360deg)


@keyframes toRight
  0%
    background: linear-gradient(135deg, #fff 0%, #fff 0%)
  10%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 10%)
  20%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 20%)
  30%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 30%)
  40%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 40%)
  50%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 50%)
  60%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 60%)
  70%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 70%)
  80%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 80%)
  90%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 90%)
  100%
    background: linear-gradient(135deg, #fff 0%, #2a82e4 100%)